<template>
  <div>
    <el-button-group>
      <el-tooltip class="item" effect="dark" content="保存" placement="bottom">
        <el-button type="primary" size="mini" @click="save"
          ><i class="fa fa-save"> 保存</i></el-button
        >
      </el-tooltip>
      <el-tooltip
        class="item"
        effect="dark"
        content="下载流程图"
        placement="bottom"
      >
        <el-button type="primary" size="mini" @click="downloadSvg"
          ><i class="fa fa-picture-o"></i
        ></el-button>
      </el-tooltip>
      <el-tooltip
        class="item"
        effect="dark"
        content="下载流程文件"
        placement="bottom"
      >
        <el-button type="primary" size="mini" @click="downloadBpmn"
          ><i class="fa fa-download"></i
        ></el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="放大" placement="bottom">
        <el-button size="mini" @click="zoom(0.05)"
          ><i class="fa fa-search-plus"></i
        ></el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="缩小" placement="bottom">
        <el-button size="mini" @click="zoom(-0.05)"
          ><i class="fa fa-search-minus"></i
        ></el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="重置" placement="bottom">
        <el-button size="mini" @click="zoom(0)"
          ><i class="fa fa-arrows"></i
        ></el-button>
      </el-tooltip>
    </el-button-group>
  </div>
</template>

<script>
export default {
  name: "ViewerHeader",
  data() {
    return {
      scale: 1.0,
      canRedo: false,
    };
  },
  props: {
    processData: {
      type: Object,
    },
    modeler: {
      type: Object,
    },
    row: {
      type: Object,
    },
  },
  components: {},
  methods: {
    save() {
      let that = this;
      let _xml;
      let _svg;
      this.modeler.saveXML((err, xml) => {
        if (err) {
          console.error(err);
        }
        _xml = xml;
      });
      this.modeler.saveSVG((err, svg) => {
        if (err) {
          console.error(err);
        }
        _svg = svg;
      });
      that.$emit("processSave", {
        bpmnXml: _xml,
        svgJson: _svg,
        processDesignCode: this.row.processDefCode,
        processDesignId: this.row.processDefId,
        processDesignName: this.row.processDefName,
        processDesignVersion: this.row.processDefVersion,
        status: this.row.status,
      });
    },
    downloadSvg() {
      this.$emit("handleExportSvg");
    },
    downloadBpmn() {
      this.$emit("handleExportBpmn");
    },
    zoom(val) {
      let newScale = !val
        ? 1.0
        : this.scale + val <= 0.2
        ? 0.2
        : this.scale + val;
      this.modeler.get("canvas").zoom(newScale);
      this.scale = newScale;
    },
  },
};
</script>

<style scoped>
</style>
